<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>泡泡侠---订单列表</title>
  <link rel="stylesheet" href="css/app.css">
  <script type="text/javascript">
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
         
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>

<body>
<section id="wrapper">
  
  
  <section id="header" pp_name="悬浮页头">
    <div class="header header_ddlb">
      <a href="#" class="l on"><span >服务中</span></a>
      <a href="#" class="m "><span >已完成</span></a>
    </div>
  </section> 
  <sectin id="ddlb_body"  pp_name="订单列表">
    <div class="ddlb_body bottom">
      <div class="tab">
      <ul>
        <li>
          <div class="box">
            <div class="t">
              <div class="l xixie">
                <span>洗鞋</span>
              </div>
              <div class="r sta1">
                 <span>已确认</span>
              </div>
            </div>
            <div class="b">
               <span>订单编号：15070621 164544</span>
                <span >取件时间：2015-07-09 10:00-12:00</span>
            </div>
          </div>
        </li>
        <li>
          <div class="box">
            <div class="t">
              <div class="l xiyi">
                <span>洗衣</span>
              </div>
              <div class="r sta2">
                 <span>已确认</span>
              </div>
            </div>
            <div class="b">
               <span>订单编号：15070621 164544</span>
                <span >取件时间：2015-07-09 10:00-12:00</span>
            </div>
          </div>
        </li>
        <li>
          <div class="box">
            <div class="t">
              <div class="l qita">
                <span>其他</span>
              </div>
              <div class="r sta3">
                 <span>代收货</span>
              </div>
            </div>
            <div class="b">
               <span>订单编号：15070621 164544</span>
                <span >取件时间：2015-07-09 10:00-12:00</span>
            </div>
          </div>
        </li>
       </ul>
      </div>
      <div class="tab" style="display:none;">
      <ul>
        <li>
             <div class="msg">
              亲！您没有衣物正在清洗
            </div>
        </li>
        
        
       </ul>
      </div>

    </div>
    
  </sectin>
  <section id="footer" pp_name="悬浮页脚">
    <div class="footer">
      <a href="#" class="l on"><span >洗衣</span></a>
      <a href="#" class="m "><span >订单</span></a>
      <a href="#" class="r "><span >个人</span></a>
    </div>
  </section>
</section>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper3.1.0.jquery.min.js"></script>
<script>


 
 
$(document).ready(function(){

$("#header .header_ddlb a").click(function(){
  if(!$(this).hasClass("on")){
      $(this).addClass("on");
      $(this).siblings().removeClass("on");
      var hide_box=$(".tab").eq($(this).index());
      $(hide_box).slideDown();
      $(hide_box).siblings().slideUp();
  }
});
        
         







});
</script>
</body>
</html>